<template>
  <div class="checkbox">
    <div class="item">
      <label for="">存证编号：</label>
      <input type="text" v-model="form.id" placeholder="请输入唯一的存证编号" />
    </div>
    <div class="radio">
      <label for="">验证内容：</label>
      <el-radio-group v-model="radios" class="ml-4">
        <el-radio :label="true" size="large">文件上传</el-radio>
        <el-radio :label="false" size="large">手动输入</el-radio>
      </el-radio-group>
    </div>
    <div class="main">
      <el-upload
        v-if="radios"
        class="upload-demo"
        drag
        action="http://127.0.0.1:7011/fs/fstype"
        multiple
        :on-success="success"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖拽到此处或者 <em>点击上传</em>
        </div>
      </el-upload>
      <el-input
        v-else
        class="mian-input"
        v-model="content"
        :autosize="{ minRows: 4, maxRows: 8 }"
        type="textarea"
        placeholder="请输入与存证完全一致的信息（文件hash）"
      />
    </div>
    <div class="item code">
      <label for="">验证码：</label>
      <input
        type="text"
        v-model="form.code"
        placeholder="请输入四位验证码 区分大小写"
      />
      <Code @click="refreshCode" :identifyCode="identifyCode" class="yzm" />
    </div>
    <div class="item">
      <button @click="check">验证</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Code from "../Code/index.vue";
import { ElMessage } from "element-plus";
let radios = ref(true);
let content = ref("");
const form = ref({
  id: "",
  code: "",
});
const identifyCode = ref("14sb");
const identifyCodes = ref([
  "0",
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "a",
  "b",
  "c",
  "d",
]);
// 生成随机数
const randomNum = (min, max) => {
  max = max + 1;
  return Math.floor(Math.random() * (max - min) + min);
};
// 更新验证码
const refreshCode = () => {
  identifyCode.value = "";
  makeCode(identifyCodes.value, 4);
};
// 随机生成验证码字符串
const makeCode = (data, len) => {
  for (let i = 0; i < len; i++) {
    identifyCode.value +=
      identifyCodes.value[randomNum(0, identifyCodes.value.length - 1)];
  }
};

// 验证
const check = () => {
  if (!form.value.id) {
    return ElMessage({ type: "warning", message: "存证编号不能为空！" });
  }
  if (!radios.value) {
    if (!content.value) {
      return ElMessage({ type: "warning", message: "验证内容不能为空！" });
    }
  }
  if (!form.value.code) {
    return ElMessage({
      type: "warning",
      message: "验证码不能为空！",
    });
  }
  if (form.value.code != identifyCode.value) {
    return ElMessage({
      type: "error",
      message: "验证码不正确，请点击验证码刷新重新回填！",
    });
  }
};
const success = (uploadFile) => {
  console.log(uploadFile);
};
</script>

<style lang="less" scoped>
.checkbox {
  width: 898px;
  height: 568px;
  border: 1px solid rgb(228, 228, 228);
  margin: 0 auto 40px;
  text-align: center;
  .item {
    margin: 20px 0 10px 0;
    input {
      width: 447px;
      height: 40px;
      padding: 0 0 0 15px;
    }
    input:focus {
      outline: none;
      border: 2px solid #0079fe;
    }
  }
  .item:last-child {
    width: 200px;
    height: 40px;
    margin: 40px auto 0;
    button {
      width: 100%;
      height: 100%;
      background-color: #0079fe;
      color: white;
      border: none;
    }
  }
  .item:last-child:hover button {
    background-color: #268fff;
    cursor: pointer;
  }
  .code {
    margin: 20px 0 0 -60px;
    input {
      width: 200px;
    }
    .yzm {
      display: inline-block;
      vertical-align: middle;
      margin: 5px 0 0 70px;
    }
  }
  .radio {
    margin: 0 0 0 -290px;
    label {
      margin: 0 10px 0 0;
    }
  }
  .main {
    .upload-demo {
      width: 400px;
      margin: 0 auto;
    }
    .mian-input {
      width: 400px;
    }
  }
}
</style>